<template>
  <div>
    <el-image
      style="width: 100vw; height: calc(100vh - 5px); overflow: hidden"
      :src="url"
      fit="cover"
    />
    <div class="main">
      <div class="container-left">
        <div style="font-size: 25px; margin-top: 20px; margin-bottom: 30px">登录</div>
        <div class="inpItem">
          <input type="text" class="inp" placeholder="账号" v-model.trim="login.username" />
        </div>
        <div class="inpItem">
          <input type="password" class="inp" placeholder="密码" v-model.trim="login.password" />
        </div>
        <div class="kapath">
          <input
            type="text"
            class="inp"
            style="width: 80px; margin-right: 15px; margin-left: 15px"
            placeholder="验证码"
            v-model.trim="login.code"
          />
          <img :src="baseImg" alt="" style="height: 20px" />
        </div>
        <div style="text-align: left; margin-left: 45px; margin-top: 10px">
          <el-checkbox v-model="isRemember" label="记住密码" size="large" />
        </div>
        <div>
          <button class="btn" @click="submit">登录</button>
        </div>
      </div>
      <div class="container-right">
        <div style="font-size: 25px; margin-top: 20px; margin-bottom: 30px">注册</div>
        <div class="inpItem">
          <input type="text" class="inp" placeholder="账号" v-model.trim="register.username" />
        </div>
        <div class="inpItem">
          <input type="password" class="inp" placeholder="密码" v-model.trim="register.password" />
        </div>
        <div class="inpItem">
          <input type="email" class="inp" placeholder="邮箱" v-model.trim="register.email" />
        </div>
        <div class="kapath">
          <input
            type="text"
            class="inp"
            style="width: 80px; margin-right: 15px; margin-left: 15px"
            placeholder="验证码"
            v-model.trim="register.code"
          />
          <img :src="baseImg" alt="" style="height: 20px" />
        </div>
        <div style="margin-top: 10px">
          <button class="btn" @click="registerUser">注册</button>
        </div>
      </div>
      <div class="container-mack" :style="{ transform: `translateX(${movePx}px)` }">
        <el-image
          style="height: 350px; width: 300px"
          :src="isMask ? leftMask : rightMask"
          fit="cover"
        />
        <div style="position: fixed; left: 0; top: 0">
          <div v-show="!isMask">
            <button class="btn mbtn" @click="moveMask(0)">注册</button>
          </div>
          <div v-show="isMask">
            <button class="btn mbtn" @click="moveMask(1)">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from '@/util/request'
import url from '@/assets/img/loginBack.jpg'
import { ElNotification } from 'element-plus'
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'
import leftMask from '@/assets/img/8.jpg'
import rightMask from '@/assets/img/9.jpg'

const isRemember = ref(false)

const isMask = ref(false)

const login = ref({
  username: '',
  password: '',
  uuid: '',
  code: ''
})

const register = ref({
  username: '',
  password: '',
  uuid: '',
  code: '',
  email: ''
})

const movePx = ref(0)

const router = useRouter()
const baseImg = ref('')
const moveMask = (type) => {
  if (type === 0) {
    movePx.value -= 300
  } else {
    movePx.value += 300
  }
  isMask.value = !isMask.value
}

const submit = () => {
  console.log('登录了', localStorage.getItem('token'), login.value)
  console.log(isRemember.value)

  if (login.value.username === '' || login.value.password === '' || login.value.code === '') {
    ElNotification.warning('抱歉，账号、密码、验证码不能为空')
    return
  }

  if (titleUtil.isEnglish(login.value.username) === '') {
    ElNotification.warning('抱歉，用户名不能为中文')
    return
  }

  request
    .post('/user/login', login.value)
    .then((res) => {
      ElNotification.success('登录成功！')
      console.log(res.data, isRemember.value)

      if (isRemember.value) {
        localStorage.removeItem('login')
        localStorage.setItem('login', JSON.stringify(login.value))
      }
      localStorage.setItem('user', JSON.stringify(res.data))
      localStorage.setItem('token', res.data.token)
      router.push('/umain')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }

      getKaptch()
    })
}

const registerUser = () => {
  if (
    register.value.username === '' ||
    register.value.password === '' ||
    register.value.code === '' ||
    register.value.email === ''
  ) {
    ElNotification.warning('抱歉，账号、密码、验证码、邮箱不能为空')
    return
  }

  if (titleUtil.isEnglish(register.value.username) === '') {
    ElNotification.warning('抱歉，用户名不能为中文')
    return
  }

  request
    .post('/user/register', register.value)
    .then((res) => {
      ElNotification.success('注册成功')
      console.log(res.data, isRemember.value)
      login.value.username = res.data.username
      login.value.password = res.data.password
      isMask.value = false
      movePx.value += 300
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }

      getKaptch()
    })
}

const getKaptch = () => {
  console.log('执行了')
  request
    .get('/user/captcha')
    .then((res) => {
      console.log('获取成功：', res)
      login.value.uuid = res.data.uuid
      baseImg.value = res.data.base64Img
      register.value.uuid = res.data.uuid
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  const localLogin = JSON.parse(localStorage.getItem('login'))
  if (localLogin && localLogin != null) {
    if ((localLogin.username && localLogin.username != '') || localLogin.username != null) {
      login.value.username = localLogin.username
    }
    if ((localLogin.password && localLogin.password != '') || localLogin.password != null) {
      login.value.password = localLogin.password
    }
  }

  getKaptch()
})
</script>

<style scoped>
.main {
  width: 600px;
  height: 350px;
  background: rgba(167, 167, 167, 0.4);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  box-shadow: 5px 5px 10px 5px rgba(241, 241, 241, 0.4);
}

.container-left {
  width: 300px;
  text-align: center;
}

.container-right {
  width: 300px;
  text-align: center;
}

.inpItem {
  width: 200px;
  margin-left: 45px;
  padding: 5px;
  background: #fff;
  margin-bottom: 15px;
}

.inp {
  border: none;
  background: #fff;
  height: 20px;
  color: #000;
}

.kapath {
  background: #fff;
  width: 200px;
  padding: 5px;
  margin-left: 45px;
  display: flex;
  justify-content: flex-start;
}

.btn {
  border: none;
  width: 120px;
  padding: 8px;
  border-radius: 25px;
  background: #2c3e50; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4ca1af, #2c3e50); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #4ca1af,
    #2c3e50
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.btn:hover {
  cursor: pointer;
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3a6073, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #3a6073,
    #3a7bd5
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container-mack {
  position: fixed;
  margin-left: 300px;
  z-index: 2;
  width: 300px;
  height: 350px;
  background: #fff;
  transition: transform 1s ease;
}

.mbtn {
  margin-top: 50%;
  margin-left: 90px;
}
</style>
